<template>
  <div>
      <div class="titlebox">
              <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
      <el-button type="danger" size="mini" @click="handleMulDel('more')">删除</el-button>
      <el-form>
            <el-form-item label="输入ID查询：">
            <el-input
              v-model="id"
              placeholder="请输入ID"
              @blur="chaorech"
            ></el-input>
          </el-form-item>
             
      </el-form>
         <el-button type="primary" size="mini" @click="search">查询</el-button>
      </div>
 
       <el-table
    ref="multipleTable"
    border
    v-loading="loading"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
 >
    </el-table-column>
    <el-table-column
      prop="admin_id"
      label="管理员ID"
    >
    </el-table-column>
     <el-table-column
      prop="admin_name"
      label="管理员账号"
  >
    </el-table-column>
    <el-table-column
      prop="real_name"
      label="真实姓名"
  >
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="手机号"
      show-overflow-tooltip>
    </el-table-column>
   <el-table-column label="是否禁用管理员" prop="is_use">
        <template v-slot:default="scope">
          <el-switch
            :value="scope.row.is_use==1?true:false"
            @change="changeadminstatus(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
      label="操作"
  >
    <template slot-scope="scope">
        <el-button type="danger" size="mini" @click="handleMulDel('row',scope.row.admin_id)">删除</el-button>
      <el-button type="primary" size="mini"  @click="amendbtn(scope.row,scope.row.admin_id)">修改</el-button>
    </template>
    </el-table-column>
  </el-table>
   <!-- 分页start -->
    <div class="fy" v-if="tableData.length">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-sizes="[5, 10, 15, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <!-- 分页 end -->
  <!-- 添加弹框start -->
  <el-dialog   
  title="添加管理员"
  :visible.sync="dialogVisible"
  width="80%"
  :before-close="handleClose">
  <el-form :model="addQuery" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="管理员名称:" prop="admin_name">
              <el-input
                v-model="addQuery.admin_name"
                placeholder="请输入管理员名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input type="password" placeholder="请输入密码" v-model="addQuery.pwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repwd">
              <el-input type="password" placeholder="请确认密码" v-model="addQuery.repwd"></el-input>
            </el-form-item>
          <el-form-item label="真实姓名:" prop="real_name">
              <el-input placeholder="请输入真实姓名" v-model="addQuery.real_name"></el-input>
        </el-form-item>
     <el-form-item label="手机号:" prop="mobile">
              <el-input placeholder="请输入手机号" v-model="addQuery.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
              <el-input placeholder="请输入邮箱" v-model="addQuery.email"></el-input>
            </el-form-item>
           <el-form-item label="是否禁用:" prop="is_use">
             <el-switch
                v-model="addQuery.is_use"
                @change="changeitemformStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
        </el-form-item>
 
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addFormData">确 定</el-button>
  </span>
</el-dialog>
  <!-- 添加弹框end -->
  <!-- 修改弹框start -->
  <el-dialog
  title="修改管理员"
  :visible.sync="dialogrevise"
  width="80%"
  :before-close="handleClose">
  <el-form :model="addQuery" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="管理员名称:" prop="admin_name">
              <el-input
                v-model="addQuery.admin_name"
                placeholder="请输入管理员名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input type="password" placeholder="请输入密码" v-model="addQuery.pwd"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repwd">
              <el-input type="password" placeholder="请确认密码" v-model="addQuery.repwd"></el-input>
            </el-form-item>
          <el-form-item label="真实姓名:" prop="real_name">
              <el-input placeholder="请输入真实姓名" v-model="addQuery.real_name"></el-input>
        </el-form-item>
     <el-form-item label="手机号:" prop="mobile">
              <el-input placeholder="请输入手机号" v-model="addQuery.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
              <el-input placeholder="请输入邮箱" v-model="addQuery.email"></el-input>
            </el-form-item>
           <el-form-item label="是否禁用:" prop="is_use">
             <el-switch
                v-model="addQuery.is_use"
                @change="changeitemformStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
        </el-form-item>
 
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogrevise = false">取 消</el-button>
    <el-button type="primary" @click="amendData">确 定</el-button>
  </span>
</el-dialog>
  <!-- 修改弹框end -->
  </div>
</template>

<script>
export default {
      data() {
      return {
        tableData: [],
        adid:'',
       formInline: {
           pageSize: 5, //每页显示多少条 默认是2
           page: 1, //页码 默认是1
      },
        loading: true,
        total:'',
        id:'',
        multipleSelection: [],
        dialogVisible:false,
        dialogrevise:false,
        addQuery:{
            admin_name: "", 
            email: "", 
            mobile: "", 
            is_use:false, 
            pwd: "", 
            repwd: "" ,
            real_name:"",
            wechat:"",
            qq:"",
            remarks:""
        },
        total: 0,
       rules: {
        admin_name: [
          { 
          required: true, 
          message: "请输入管理员名称", 
          trigger: "blur" 
          },
          { 
            min: 3,
            max: 5, 
            message: "长度在 3 到 8 个字符", 
            trigger: "blur" },
        ],
        pwd: [
          { 
          required: true,
          message: "请输入密码", 
          trigger: "blur" },
          { 
            min: 2,
            max: 9, 
            message: "支持2~9位", 
            trigger: "blur" },
        ],
        repwd: [
          { 
          required: true,
          message: "请确认密码", 
          trigger: "blur" },
          { 
            min: 2,
            max: 9, 
            message: "支持2~9位", 
            trigger: "blur" },
        ],
        mobile: [
          { 
          required: true,
           message: "请输入手机号", 
           trigger: "blur" 
           },
        ],
        is_use:[
          { 
            required: true, 
            message: "请选择状态", 
            trigger: "blur" 
            }]
      },
      }
    },
mounted(){
    this.onSearch()
},
    methods: {
        async search(){
            let res = await this.$http.get('/visit/admin/show',{id:this.id})
            // console.log(res);
            if(res.code == '00000'){
              this.tableData=[]
                this.tableData.push(res.data)
                
            }
        },
        chaorech(){
          if(this.id==''){
            this.onSearch()
          }
        },
    //  渲染列表
     async onSearch(){
          let res =await this.$http.get('/visit/admin/list',{page:this.formInline.page,pageSize:this.formInline.pageSize})
          // console.log(res);
          if(res.code=='00000'){
              this.tableData=res.data;
               this.loading = false;
               this.total = res.total;
          }
      },
          // 添加表单数据
   async addFormData(){
           let res = await this.$http.post('/visit/admin/add',{ 
            "admin_name": this.addQuery.admin_name, 
            "email": this.addQuery.email, 
            "mobile":  this.addQuery.mobile, 
            "is_use": this.addQuery.is_use, 
            "pwd": this.addQuery.pwd, 
            "repwd":  this.addQuery.repwd,
            "real_name":this.addQuery.real_name,
            "wechat":this.addQuery.wechat,
            "qq":this.addQuery.qq,
            "remarks":this.addQuery.remarks
            })
        // console.log(res);
        if(res.code=='00000'){
            this.$message.success('添加成功')
            this.onSearch()
        this.dialogVisible = false
        this.addQuery={}
     }else{
            this.$message.error('添加错误')
        }
    },
      // 批量删除
     handleMulDel(type,id){
      if(type==='more'){
         if(this.multipleSelection.length === 0) {
            return this.$message.error('请勾选要删除的数据')
        }
        let arr = [] 
       this.multipleSelection.forEach(item =>{
        arr.push(item.admin_id)
       });
       id = arr
      }
   //把批量删除的item_id 传给后台
       this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(async() => {
        let res = await this.$http.get('/visit/admin/del',{admin_id:id})
        // console.log(res);
        if(res.code=='00000'){
            this.$message({
                type: 'success',
                message: '删除成功!'
             });
             this.onSearch()
        }
            }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 修改适用状态
   async changeadminstatus(row){
      row.is_use=!row.is_use
      let res = await this.$http.post('/visit/admin/changestatus',{admin_id:row.admin_id,is_use:row.is_use})
        // console.log(res);
        if(res.code=='00000'){
            this.$message.success("修改状态成功");
              this.onSearch()
        }else{
            this.$message.error("修改状态失败");
        }
    },
    async amendData(){
      let res = await this.$http.post('/visit/admin/edit',{admin_id:this.adid,
      "formdata":{
         "admin_name": this.addQuery.admin_name, 
        "email": this.addQuery.email, 
        "mobile": this.addQuery.mobile, 
        "is_use": this.addQuery.is_use, 
        "pwd": this.addQuery.pwd, 
        "repwd":this.addQuery.repwd,
        "real_name":this.addQuery.real_name,
        "wechat":this.addQuery.wechat,
        "qq":this.addQuery.qq,
        "remarks":this.addQuery.remarks
      }})
      // console.log(res);
      if(res.code == '00000'){
        this.$message.success('修改成功')
        this.onSearch()
        this.dialogrevise = false
        this.addQuery={}
      }else{
            this.$message.error('修改失败')
        }
    },
      handleAdd(){
        this.dialogVisible=true;
      },
      amendbtn(row,admin_id){
      this.adid = admin_id
      this.addQuery = row
        this.dialogrevise=true;
      },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
        changeitemformStatus(e) {
         console.log(e);
       },
      changeitemformStatus(status){
        this.addQuery.is_use=status
    },
     handleSizeChange(val) {
     this.formInline.pageSize =val;
     this.onSearch()
      },
      handleCurrentChange(val) {
        //  console.log(val)
      this.formInline.page = val;
      this.onSearch();
      },
    }
}
</script>

<style scoped>
.el-table{
    margin-top: 30px;
}
.btn{
    display: flex;
}
.titlebox{
  height: 30px;
  display: flex;
}
.titlebox .el-form-item{
  display: flex;
  margin-left: 30px;
}
.titlebox .el-form-item .el-input{
width: 190px;
height: 30px;
}
.titlebox .el-button{
  margin-left: 30px;
}
.fy{
  padding-top: 25px;
  text-align: center;
}
</style>